<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" href="css/jquery.fullPage.css">
		<!-- <link rel="stylesheet" href="animate.min.css"> -->
		<link rel="stylesheet" href="css/templateAnimate.css">
		<style>
			.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;background-size: 100%;}
			.main-bg{
				/* background-image: url(img/chineseStyle/gui_bg@3x.png); */
			}
			.ele{
				position: absolute;
				background-size: 100%;
			}
			.yinyue{
				position: absolute;
				background: url(img/chineseStyle/gui_icon_yinyue@3x.png);
				background-size: 100%;
				width:36px;
				height:36px;
				top:20px;
				right:20px;
				z-index: 10000;
			}
			.tanimate{
				transition:all 2s ease-in-out;
			}
			.rotate{
			 -webkit-transition-property: -webkit-transform;
				-webkit-transition-duration: 1s;
				-moz-transition-property: -moz-transform;
				-moz-transition-duration: 1s;
				-webkit-animation: rotate 3s linear infinite;
				-moz-animation: rotate 3s linear infinite;
				-o-animation: rotate 3s linear infinite;
				animation: rotate 3s linear infinite;
			}
			@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
				to{-webkit-transform: rotate(360deg)}
			}
			@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
				to{-moz-transform: rotate(359deg)}
			}
			@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
				to{-o-transform: rotate(359deg)}
			}
			@keyframes rotate{from{transform: rotate(0deg)}
				to{transform: rotate(359deg)}
			}
		</style>
	</head>
	<body>
		<div class="yinyue rotate" id="yinyue">
			<audio loop autoplay id="radioID"></audio>
		</div>
		<div id="dowebok" class="main-bg"></div>
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script src="js/jquery.fullPage.min.js"></script>
		<script src="js/jquery.easing.min.js"></script>	
		<!-- <script src="js/data.js"></script> -->
		<script src="js/main.js"></script>
		<script>
		$(function(){
			// 先注释，用测试数据
			let initData = function (a) {
				var infinitusInvitationData = a;
				// infinitusInvitationData.infinitusInvitationMain[0].template = "business";
				//初始化页面
				var type = infinitusInvitationData.infinitusInvitationMain[0].templateCode;
				$("#radioID").attr("src",infinitusInvitationData.infinitusInvitationMain[0].music)
				loadJS('js/'+type+'.js',function(){
					// 页面加载进来就播放音乐
					var myVideo = document.getElementById("radioID");
					setTimeout(function(){
						$("#yinyue").click();
					},1000);
					setTimeout(function(){
						$("#yinyue").click();
					},2000);
					//页面数据对象与dom结构数据对象关联
					var relation = {infinitusInvitationMain:eleDatas.eles1,infinitusInvitationIntroduce:eleDatas.eles2,infinitusInvitationProcedure:eleDatas.eles3,infinitusInvitationGuest:eleDatas.eles4,infinitusInvitationFoot:eleDatas.eles5}
					//嘉宾页特殊处理dom结构
					tempGenerate["iigDataDom"] = eles4Data;
					tempGenerate.init(relation,$("#dowebok"),infinitusInvitationData);
					$(".section").css("background-image","url(img/"+type+"/gui_bg@3x.png)");
					$('#dowebok').fullpage({
						// sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
						afterLoad: function(anchorLink, index){
							tempGenerate.startAnimate(index);
						},
						onLeave: function(index, direction){
							//所有背景开始执行动画
							$('#dowebok').find(".section").stop();
							$('#dowebok').find(".section").css({  
								"background-position-y": "-300px",
							})
							$('#dowebok').find(".section").animate({
								"background-position-y": "0px",
							},{
							  duration:2500,
							  easing:tempGenerate.options.easing
							})
							tempGenerate.animateReady(direction);
						}
					});
					//默认进去页面执行第一页动画
					tempGenerate.animateReady(1);
					tempGenerate.startAnimate(1);
					$("#yinyue").click(function(){
						if($("#yinyue").hasClass("rotate")){
							$("#yinyue").removeClass("rotate");
							myVideo.pause()
						}else{
							$("#yinyue").addClass("rotate");
							myVideo.play()
						}
					});
				});
			}
			// 先注释，用测试数据,接口数据
			let data = {
				"id": getQueryVariable("id"),
				// "userId": "",
				// "template": " ",
				// "draft": " ",
				// "theme": " ",
				// "themeSub": " ",
				pageNumber: 0,
				pageSize: 1
			}
			//远程请求
			$.ajax({
				type: "POST",
				data: JSON.stringify(data),
				url: "https://www.hiruo.cn/macula-plugins-webapp/mobile/invitation/list",
				headers: {
					"Content-Type": "application/json",
				},
				dataType: 'json',
				success(res) {
					if (res.code === 0) {
						$('#loadingID').css({ display: 'none' })
						// 暂时不需要，否则会报错
						delete res.data.infinitusInvitations[0].infinitusInvitationTemplate
						initData(res.data.infinitusInvitations[0])
					} else {
						console.log("出现错误：" + data.msg);
					}
				},
				error(jqXHR) {
					console.log("发生错误：" + jqXHR.status);
				}
			});
			// initData(infinitusInvitationData);
		});
		
		</script>
	</body>
</html>
